@buttonHeight: 40px;
@buttonLowHeight: 35px;

.button-style {
  .buttonStyle();
  height: @buttonHeight - 2px;
  line-height: @buttonHeight - 2px;
  padding: 0 10px;
}

.buttonStyle() {
  display: inline-block;
  text-align: start;
  font-size: @baseFontSize;
  font-family: @baseFontFamily;
  margin: 0;

  padding: 0px 0px;
  border: 1px solid #d4d4d4;
//font-weight: bold;
  vertical-align: top;
  font-weight: bold;

  .backgroundGradient(#fafafa, #ececec);
  color: #0d0d0d;

  &:not(.button-tab) {
    .borderRadius();
    box-shadow: 0 1px 2px #e1e1e1;
  }

  & > * {
    display: inline-block;
    vertical-align: middle;
  }
}

.buttonHoverBackground() {
  .backgroundGradient(#fcfcfc, #f3f3f3);
}
.buttonActiveBackground() {
  .backgroundGradient(#dcdcdc, #ebebeb);
  box-shadow: inset 0 2px 3px #9c9c9c;
}

button, .button{
  //-------------
  .defaultStates() {
    &:hover:not([disabled]){
      .buttonHoverBackground();
    }
    &:active:not([disabled]), &:not(.button-tab).active:not([disabled]) {
      .buttonActiveBackground();
    }
    &[disabled]{
      color: #b0b1b3;
    }
  }
  //-------------
  text-transform: uppercase;
  cursor: pointer;
  height: @buttonHeight;
  line-height: @buttonHeight;

  .buttonStyle();
  .defaultStates();

  //--- variants
  &.primary{
    .backgroundGradient(#ce080c, #9f0609);
    border: 1px solid #9f0609 ;
    .borderRadius();
    box-shadow: 0 1px 2px rgba(178, 5, 8, 0.27);
    color: #fcfdff;
    &:hover:not([disabled]){
      .backgroundGradient(#ce080c, #ce080c);
    }
    &:active:not([disabled]){
      .backgroundGradient(#9f0609, #ce080c);
      box-shadow: inset 0 2px 4px #750508;
      //padding: 6px 20px 4px 20px;
    }
    &[disabled]{
      color: #c8c9cb;
    }
  }

  &.button-tab {
    .borderRadiusTop();
    border-bottom: none;

    &.active { background: white; }
  }

  &.button-icon {
    i { vertical-align: middle !important; }
    min-width: @buttonHeight;
    text-align: center;
  }

  &.button-text {
    padding-right: 10px;
    padding-left: 10px;
    min-width: 92px;
    text-align: center;
  }

  &.large{
    min-width: 120px;
  }
}

.button-low{
  height: @buttonLowHeight;
  line-height: @buttonLowHeight;
}

.button-low-row-right-alignment{
  height: @buttonLowHeight;
  & > .button-low{
    float: right;
    margin-left: 5px;
  }
}

.button-circle, .button-circle i { .borderRadius(50px); }
.button-circle {
  position: relative;
  .backgroundGradient(#f0f0f0, #f7f7f7);
  width: 32px;
  height: 32px;
  cursor: pointer;
  line-height: 0;

  &:hover {
    .buttonHoverBackground();
  }
  &:active, &.active {
    .buttonActiveBackground();
  }
  & i {
    margin: 2px;
    border: 1px solid #ebebeb;
  }

  .ui-datepicker-trigger {
    //background: green;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.button-group {
  display: inline-block;
  background: #dedddd;
  padding: 3px;
  .borderRadius();
  margin-top: -3px;
}

